<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index_process</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
        }

        /* 头部样式 */
        .header1 {
            background-color: #f1f1f1;
            height: 24px;
        }

        .header1 .tit {
            font-weight: bold;
            height: 24px;
            width: 70px;
            margin: 0 auto;
            cursor: pointer;
            text-align: center;
        }

        .column1 .tit {
            height: 50px;
            width: 70px;
            cursor: pointer;
            text-align: center;
        }

        .column2 .tit {
            height: 50px;
            width: 100px;
            cursor: pointer;
            text-align: center;
        }

        .column3 .tit {
            height: 50px;
            width: 120px;
            cursor: pointer;
            text-align: center;
        }

        .tit:hover {
            background-color: blue;
        }

        /* 头部样式 */
        .header {
            background-color: #f1f1f1;
            padding: 1px;
            text-align: left;
            margin: 0 auto;
        }

        .header3 {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: left;
            margin: 0 auto;
        }

        .column1 {
            float: left;
            width: 33.3%;
        }

        .column2 {
            float: left;
            width: 43.3%;
        }

        .column3 {
            float: left;
            width: 23.3%;
        }

        .hide-div {
            display: none;
        }

        /* 列后清除浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }


    </style>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="config.js"></script>

</head>
<body>
<div class="header1">
    <div class="tit">查看进程</div>
</div>


<div class="row">
    <div class="column1">
        <div class="tit" style="font-size: 30px;font-weight: bolder">归档</div>
        <div class="header">
            <div id="RUN1"></div>
        </div>
        <div class="header">
            <div id="RUN2"></div>


        </div>
        <div class="header">
            <div id="RUN3"></div>

        </div>
        <div class="header">
            <div id="RUN4"></div>

        </div>
    </div>
    <div class="column2" style="overflow:auto;height: 900px">
        <div class="tit" style="font-size: 30px;font-weight: bolder">数据库</div>
        <div class="header">
            <div id="redis"></div>
        </div>
        <div class="header">
            <div id="mongodb"></div>
        </div>
        <div class="header" style="float: right;width: 40%">
            <div id="redistop"></div>
        </div>
        <div class="header" style="float: left;width: 59.5%">
            <div id="mongotop"></div>

        </div>
    </div>
    <div class="column3" style="overflow: auto;height: 900px">
        <div class="tit" style="font-size: 30px;font-weight: bolder">allLook</div>
        <div class="header3">
            <a href="mongo.html" target="_blank">档案首页</a>
        </div>
        <div class="header3">
            <a href="mongocard.html" target="_blank">证件首页</a>
        </div>
        <div class="header3">
            <a href="mongoacvsp.html" target="_blank">档案P首页</a>
        </div>
        <div class="header3">
            <a href="mongoface_acvs_face.html" target="_blank">face_acvs_face</a>
        </div>
        <div class="header3">
            <a href="mongoacvsacvs_relation.html" target="_blank">acvsacvs_relation</a>
        </div>
        <div class="header3">
            <a href="mongo_ovodata.html" target="_blank">ovodata</a>
        </div>
        <div class="header3">
            <a href="mongoallcapture.html" target="_blank">allcapture</a>
        </div>
        <br>
        <br>
        <div style="word-break: break-all;overflow: auto"">
            <div>
                <input type="button" value="mongo_info" id="mongo-button">
                <input type="button" value="redis_info" id="redis-button">
            </div>

            <div class="hide-div" id="mongo_info"></div>
            <div class="hide-div" id="redis_info"></div>
        </div>
    </div>

</div>


<script>
    $(function () {

        var server_ip = caijingdaxueip;
        $.ajax({
            url: server_ip + "/index",
            type: "GET",
            success: function (data) {

                loadJson(JSON.parse(data))
            }
        })

        function loadJson(data) {
            var RUN1 = data.RUN1;
            var RUN2 = data.RUN2;
            var RUN3 = data.RUN3;
            var RUN4 = data.RUN4;
            var redis = data.redis;
            var mongodb = data.mongodb;
            var redistop = data.redistop;
            var mongotop = data.mongotop;
            var mongo_info = data.mongo_img
            var redis_info = data.redis_img

            var test1 = "<h3>RUN1: <br/>";
            for (i = 0; i < RUN1.length; i++) {
                test1 += RUN1[i] + "<br/>";
            }
            test1 += "</h3>"

            var test2 = "<h3>RUN2: <br/>";
            for (i = 0; i < RUN2.length; i++) {
                test2 += RUN2[i] + "<br/>";
            }
            test2 += "</h3>"

            var test3 = "<h3>RUN3: <br/>";
            for (i = 0; i < RUN3.length; i++) {
                test3 += RUN3[i] + "<br/>";
            }
            test3 += "</h3>"

            var test4 = "<h3>RUN4: <br/>";
            for (i = 0; i < RUN4.length; i++) {
                test4 += RUN4[i] + "<br/>";
            }
            test4 += "</h3>"

            var test5 = "<h3>redis: <br/>";
            for (i = 0; i < redis.length; i++) {
                test5 += redis[i] + "<br/>";
            }
            test5 += "</h3>"

            var test6 = "<h3>monodb: <br/>";
            for (i = 0; i < mongodb.length; i++) {
                test6 += mongodb[i] + "<br/>";
            }
            test6 += "</h3>"

            var test7 = "<h3>redis占用: <br/>";
            for (i = 0; i < redistop.length; i++) {
                if (redistop[i].indexOf("tcp_port") != -1) {
                    test7 += redistop[i] + "<br/>";
                }
                if (redistop[i].indexOf("used_memory_human") != -1) {
                    test7 += redistop[i] + "<br/>";
                }
            }
            test7 += "</h3>"

            var test8 = "<h3>mongodb占用: <br/>";
            for (i = 0; i < mongotop.length; i++) {
                test8 += mongotop[i] + "<br/>";
            }
            test8 += "</h3>"

            var test9 = "<h3>mongo_info: <br/>";
            test9 += JSON.stringify(mongo_info).replace(new RegExp("],","g"), "<br>");
            test9 += "</h3>"

            var test10 = "<h3>redis_info: <br/>";
            test10 += JSON.stringify(redis_info).replace(new RegExp(",","g"), "<br>");
            test10 += "</h3>"


            document.getElementById("RUN1").innerHTML = test1;
            document.getElementById("RUN2").innerHTML = test2;
            document.getElementById("RUN3").innerHTML = test3;
            document.getElementById("RUN4").innerHTML = test4;
            document.getElementById("redis").innerHTML = test5;
            document.getElementById("mongodb").innerHTML = test6;
            document.getElementById("redistop").innerHTML = test7;
            document.getElementById("mongotop").innerHTML = test8;
            document.getElementById("mongo_info").innerHTML = test9;
            document.getElementById("redis_info").innerHTML = test10;

            $("#mongo-button").click(function () {
                $("#mongo_info").slideToggle("hide-div")
            })

            $("#redis-button").click(function () {
                $("#redis_info").slideToggle("hide-div")
            })

        }


    })
</script>


</body>
</html>